<template>
  <h3>watch监听器</h3>
  <p>{{ msg }}</p>
  <button @click="changeMsg">点击修改msg</button>
</template>
<script>
export default {
  data() {
    return {
      msg: "hello kitty"
    };
  },
  // 计算属性
  computed: {},
  methods: {
    changeMsg() {
      this.msg = "龙王"
    }
  },
  // 监听
  watch: {
    // 这里以变量名作为方法名称,前面的变动以后的值,后面的变动以前的值
    msg(newValue, oldValue) {
      console.log("监听到msg信息更改,改前:",oldValue, "改后:",newValue)
      //监听到msg信息更改,改前: hello kitty 改后: 龙王
    }

  }
};
</script>
